<#include "header1.ftl"/>

<style>
    a{
        cursor: pointer;
    }
    .list-group-item>.badge{
        display: none;
    }
</style>
<#include "header2.ftl"/>

<div id="goodsDiv">
    <div class="main" style="margin-top:10px;">
        <div id="goodsCategoryDiv" class="category" style="margin-left: 2%;margin-top: 85px;font-size: 14px;width:240px;float: left"></div>
        <div class="container">

            <ul class="breadcrumb" id="categoryName">
                <#if cid?? && cid != 0>
                    <li><a href="javascript:void(0)" onclick="getGoods(0)">纪念品</a></li>
                    <#if parentParentCategoryName??>
                        <li>${parentParentCategoryName!}</li>
                    </#if>
                    <#if parentCategoryName??>
                        <li>${parentCategoryName!}</li>
                    </#if>
                    <li class="active">${categoryName!}</li>
                <#else>
                    <li><a href="javascript:void(0)" onclick="getGoods(0)">纪念品</a></li>
                    <li class="active">所有商品</li>
                </#if>
            </ul>
            <!-- BEGIN SIDEBAR & CONTENT -->
            <div class="row margin-bottom-40">
                <!-- BEGIN CONTENT -->
                <div class="col-md-12 col-sm-12" >
                    <div class="row list-view-sorting clearfix" id="sortDiv">
                        <div class="col-md-12 col-sm-12">
                            <div class="pull-right">
                                <label class="control-label">显示:</label>
                                <select class="form-control input-sm" id="size">
                                    <option value="12" selected="selected">12</option>
                                    <option value="20">20</option>
                                    <option value="40">40</option>
                                    <option value="60">60</option>
                                    <option value="100">100</option>
                                </select>
                            </div>
                            <div class="pull-right">
                                <label class="control-label">排序:</label>
                                <select class="form-control input-sm" id="sort">
                                    <option value="" selected="selected">默认</option>
                                    <option value="1">价格从低到高</option>
                                    <option value="-1">价格从高到低</option>
                                </select>
                            </div>
                        </div>
                    </div>
                    <div id="goodsListDiv"></div>
                    <div class="row" id="pageDiv">
                        <div class="col-md-4 col-sm-4 items-info">共<spn id="goodsTotal"></spn>件商品</div>
                        <div class="col-md-8 col-sm-8" style="text-align: right">
                            <ul id="pageLimit"></ul>
                        </div>
                    </div>

                </div>
                <!-- END CONTENT -->
            </div>
            <!-- END SIDEBAR & CONTENT -->
        </div>
    </div>
    <div id="goodsViewDiv"></div>
</div>
<#include "footer1.ftl"/>

<script type="text/html" id="goodsTemplate">
    {{if goodsList.total > 0}}
    {{each goodsList.data goods index}}
    {{if index%4 == 0}}<div class="row product-list">{{/if}}
        <!-- PRODUCT ITEM START -->
        <div class="col-md-3 col-sm-6 col-xs-12">
            <div class="product-item">
                <div class="pi-img-wrapper">
                    <img src="{{goods.image}}" class="img-responsive" alt="Berry Lace Dress" style="height: 200px;width: 200px">
                    <div>
                        <#--<a href="{{goods.image}}" class="btn btn-default fancybox-button">Zoom</a>-->
                        <a href="#product-pop-up{{index}}" class="btn btn-default fancybox-fast-view" id="view{{index}}">View</a>
                    </div>
                </div>
                <h3><a href="javascript:void(0);" onclick="getGoodsDetail({{goods.id}},${cid!})">{{goods.title}}</a></h3>
                <div class="pi-price">￥
                    {{if goods.promotionDateFrom != null && goods.promotionDateTo != null && goods.promotionPrice != null && goods.promotionDateFrom <= now && goods.promotionDateTo >= now}}
                    {{goods.promotionPrice}}
                    {{else}}
                    {{goods.price}}
                    {{/if}}
                </div>
                <a href="javascript:void(0);" class="btn btn-default add2cart" onclick="addCartProduct('{{goods.id}}')">加入购物车</a>
                {{if goods.tag == '0'}}<div class="sticker sticker-sale"></div>{{/if}}
                {{if goods.tag == '1'}}<div class="sticker sticker-new"></div>{{/if}}
            </div>
        </div>
        <!-- PRODUCT ITEM END -->
        {{if (index !=0 && (index+1)%4 == 0) || index == goodsList.data.length -1}}</div>{{/if}}
    {{/each}}

    {{else}}
    <div style="background-color: white;text-align: center;height: 400px;vertical-align: middle">
        <img src="/assets/pages/img/no_goods.png" style="height: 200px;margin-top: 50px;">
        <p style="margin-top: 10px">抱歉，没有找到您所需要的商品哦~~</p>
    </div>
    {{/if}}
</script>

<script type="text/html" id="goodsViewTemplate">
    {{each goodsList.data goods index}}
    <div id="product-pop-up{{index}}" style="display: none; width: 700px;">
        <div class="product-page product-pop-up">
            <div class="row">
                <div class="col-md-6 col-sm-6 col-xs-3">
                    <div class="product-main-image">
                        <img id="image_{{goods.id}}" src="{{goods.image}}" alt="Cool green dress with red bell" class="img-responsive" style="width: 330px;height: 330px;">
                        {{if goods.tag == '1'}}<div class="sticker sticker-new" style="right:4%"></div>{{/if}}
                    </div>

                    <div class="product-other-images">
                        {{each goods.imageList image imageIndex}}
                        <a href="{{image}}" class="fancybox-button" rel="photos-lib{{index}}" goodsIndex="{{index}}">
                            <img id="image_{{goods.id}}_{{imageIndex}}" alt="Berry Lace Dress" src="{{image}}" style="height: 58px;width:58px">
                        </a>
                        {{/each}}
                    </div>
                </div>

                <div class="col-md-6 col-sm-6 col-xs-9">
                    <h2>{{goods.title}}</h2>
                    <div class="price-availability-block clearfix">
                        <div class="price">
                            {{if goods.promotionDateFrom != null && goods.promotionDateTo != null && goods.promotionPrice != null && goods.promotionDateFrom <= now && goods.promotionDateTo >= now}}
                            <strong><span>￥</span>{{goods.promotionPrice}}</strong>
                            <em>￥<span>{{goods.price}}</span></em>
                            {{else}}
                            <strong><span>￥</span>{{goods.price}}</strong>
                            {{/if}}
                        </div>
                    </div>
                    <div class="description">
                        <p>{{goods.introduction}}</p>
                    </div>
                    <div class="product-page-options">
                        <div class="pull-left">
                            <label class="control-label">库存:</label>
                            <label class="control-label">{{goods.num}}</label>
                        </div>
                    </div>
                    <div class="product-page-cart" style="margin-top: 148px">
                        <div class="product-quantity">
                            <input id="product-quantity" limit={{goods.num}} type="text" value="1" readonly name="product-quantity" class="form-control input-sm">
                        </div>
                        <button class="btn btn-primary" type="button" onclick="addCartProduct('{{goods.id}}')">加入购物车</button>
                        <a href="javascript:void(0)" onclick="getGoodsDetail('{{goods.id}}',${cid!})" class="btn btn-default">更多明细</a>
                    </div>
                </div>

                {{if goods.tag == '0'}}<div class="sticker sticker-sale"></div>{{/if}}

            </div>
        </div>
    </div>
    {{/each}}
</script>

<script type="text/javascript">
    var cid = '${cid!}';
    var search = '${search!}';

    function dateAll(data){
        if(data==null||data==""){
            return "";
        }
        var time = new Date(data);
        var y = time.getFullYear();//年
        var m = time.getMonth() + 1;//月
        if (m >= 0 && m <= 9) {
            m = "0" + m;
        }
        var d = time.getDate();//日
        if (d >= 0 && d <= 9) {
            d = "0" + d;
        }
        var h = time.getHours();//时
        if (h >= 0 && h <= 9) {
            h = "0" + h;
        }
        var mm = time.getMinutes();//分
        if (mm >= 0 && mm <= 9) {
            mm = "0" + mm;
        }
        var ss = time.getSeconds();//秒
        if (ss >= 0 && ss <= 9) {
            ss = "0" + ss;
        }
        return (y+"-"+m+"-"+d+" "+h+":"+mm+":"+ss);
    }

    function getGoodsList(){
        var size = $("#size").val();
        var sort = $("#sort").val();
        var index = layer.load(3);
        $("#goodsListDiv").html("<div style='width: 100%;height: 500px'></div>");
        $.post('/goods/list',{cid:cid,search:search,size:size, sort:sort},function (data) {
            layer.close(index);
            var now = dateAll(new Date());
            var goodsListHtml = template('goodsTemplate',{goodsList:data,now:now});
            $("#goodsListDiv").html(goodsListHtml);
            if (data.total > 0){
                $("#goodsTotal").html(data.total);
                var goodsViewHtml = template('goodsViewTemplate',{goodsList:data,now:now});
                $("#goodsViewDiv").html(goodsViewHtml);
                Layout.init();
                Layout.initOWL();
                Layout.initImageZoom();
                Layout.initTouchspin();
                Layout.initUniform();

                var totalPages = data.total%size == 0?data.total/size:data.total/size+1;
                $('#pageLimit').bootstrapPaginator({
                    currentPage: 1,//当前页。
                    totalPages: totalPages,//总页数。
                    size:"normal",//应该是页眉的大小。
                    bootstrapMajorVersion: 3,//bootstrap的版本要求。
                    alignment:"right",
                    numberOfPages:5,//显示的页数
                    itemTexts: function (type, page, current) {//如下的代码是将页眉显示的中文显示我们自定义的中文。
                        switch (type) {
                            case "first": return "首页";
                            case "prev": return "上一页";
                            case "next": return "下一页";
                            case "last": return "末页";
                            case "page": return page;
                        }
                    },
                    onPageClicked: function (event, originalEvent, type, page) {//给每个页眉绑定一个事件，其实就是ajax请求，其中page变量为当前点击的页上的数字。
                        var index = layer.load(3);
                        $.post('/goods/list',{cid:cid,search:search,size:size, sort:sort,page:page},function (data) {
                            window.scrollTo(0,$("#goodsDiv").offset().top);
                            layer.close(index);
                            var now = dateAll(new Date());
                            var goodsListHtml = template('goodsTemplate',{goodsList:data,now:now});
                            $("#goodsListDiv").html(goodsListHtml);

                            var goodsViewHtml = template('goodsViewTemplate',{goodsList:data,now:now});
                            $("#goodsViewDiv").html(goodsViewHtml);
                            Layout.init();
                            Layout.initOWL();
                            Layout.initImageZoom();
                            Layout.initTouchspin();
                            Layout.initUniform();

                        })
                    }
                })
            }else{
                $("#pageDiv").hide();
                $("#sortDiv").hide();
            }

        })
        $(".fancybox-button").fancybox({
            'afterClose':function (e) {
                var index = e.element.attr('goodsIndex');
                $("#view"+index).trigger("click");
            }
        });
    }

    $(function () {
        Layout.init();
        Layout.initOWL();
        Layout.initImageZoom();
        Layout.initTouchspin();
        Layout.initUniform();
        // Layout.initSliderRange();
        getGoodsList();

        $('#goodsCategoryDiv').treeview({
            color: "#595f65",
            expandIcon: 'glyphicon glyphicon-chevron-right',
            collapseIcon: 'glyphicon glyphicon-chevron-down',
            data: '${treeNodes!}',
            showTags:true
        });
        $('#goodsCategoryDiv').on('nodeSelected', function(event, data) {
            var size = $("#size").val();
            var sort = $("#sort").val();
            cid = data.tags[0];
            window.location = "/goods?cid="+cid ;
        });
    });



    $("#size").on('change',function () {
        getGoodsList();
    });

    $("#sort").on('change',function () {
        getGoodsList();
    });

</script>

<#include "footer2.ftl"/>


